import {
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
  Dimensions,
  FlatList,
  Button,
  ScrollView,
} from "react-native";
import React, { useEffect, useRef, useState } from "react";
import AntDesign from "react-native-vector-icons/AntDesign";
import { useNavigation } from '@react-navigation/native';
import AllPlayListHeader from './AllPlayListHeader'

import PlayListItem2Col from "./PlayListItem2Col";

import Ionicons from "react-native-vector-icons/Ionicons";
import Toast from "react-native-easy-toast";
import Colors from "../../util/Colors";
import PickerCatBtn from "./PickerCatBtn";
import { get163Catlist } from "../../request/neteaseRequest";

export default function(props){

  const father = props.route.params.father;

  let data = [
    "热门","流行","民谣","摇滚",'HIP',"热门","流行","民谣","摇滚",'HIP',
  ]
  const [cats,setCats] = useState([
    {
      "name": "语种",
      "v": [
        "华语",
        "欧美",
        "日语",
        "韩语",
        "粤语"
      ]
    },
    {
      "name": "风格",
      "v": [
        "流行",
        "摇滚",
        "民谣",
        "电子",
        "舞曲",
        "说唱",
        "轻音乐",
        "爵士",
        "乡村",
        "R&B/Soul",
        "古典",
        "民族",
        "英伦",
        "金属",
        "朋克",
        "蓝调",
        "雷鬼",
        "世界音乐",
        "拉丁",
        "New Age",
        "古风",
        "后摇",
        "Bossa Nova"
      ]
    },
    {
      "name": "场景",
      "v": [
        "清晨",
        "夜晚",
        "学习",
        "工作",
        "午休",
        "下午茶",
        "地铁",
        "驾车",
        "运动",
        "旅行",
        "散步",
        "酒吧"
      ]
    },
    {
      "name": "情感",
      "v": [
        "怀旧",
        "清新",
        "浪漫",
        "伤感",
        "治愈",
        "放松",
        "孤独",
        "感动",
        "兴奋",
        "快乐",
        "安静",
        "思念"
      ]
    },
    {
      "name": "主题",
      "v": [
        "综艺",
        "影视原声",
        "ACG",
        "儿童",
        "校园",
        "游戏",
        "70后",
        "80后",
        "90后",
        "网络歌曲",
        "KTV",
        "经典",
        "翻唱",
        "吉他",
        "钢琴",
        "器乐",
        "榜单",
        "00后"
      ]
    }
  ]);

  const _renderItem = ({ item }) => {
    return(
        <PickerCatBtn onPress={()=>_onItemPress(item)} text={item}/>
      )

  }



  const _onItemPress = item => {
    //console.log('_onItemPressed: ' +item);
    //this.toast.show(item.name);
    props.navigation.navigate(father, {cat:item,kind:'ALL_LIST'});
  };
  return (
    <View style={styles.main}>
      <Text style={styles.homeSideTitle}>排 行 榜</Text>
      <ScrollView>
        <Text style={styles.homeSideTitle}>语种</Text>
        <FlatList
          style={{width:width}}
          data={cats[0].v}
          renderItem={_renderItem}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
        <Text style={styles.homeSideTitle}>风格</Text>
        <FlatList
          style={{width:width}}
          data={cats[1].v}
          renderItem={_renderItem}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
        <Text style={styles.homeSideTitle}>场景</Text>
        <FlatList
          style={{width:width}}
          data={cats[2].v}
          renderItem={_renderItem}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
        <Text style={styles.homeSideTitle}>情感</Text>
        <FlatList
          style={{width:width}}
          data={cats[3].v}
          renderItem={_renderItem}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
        <Text style={styles.homeSideTitle}>主题</Text>
        <FlatList
          style={{width:width}}
          data={cats[4].v}
          renderItem={_renderItem}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    </View>
  )

}
const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
  homeSideTitle: {
    fontFamily:'Raleway-Bold',
    fontSize: 20,
    color: '#7e7e7e',
    paddingTop: 20,
    paddingBottom: 20,
    marginLeft: 10,

  },
  main:{
    width:width,
    height:height - 55,

  },
  item: {
    backgroundColor:Colors.colorPrimary,
    height: 50,
    flexDirection: 'row',
    justifyContent: 'flex-start', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  icon: {
    padding: 12,

  },
  layoutText: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems:'center',
    marginLeft: 10,
    overflow: 'hidden'
  },
  itemTitle: {
    fontSize: 15,
    color: '#ffffff'
  },
  itemSubTitle: {
    fontSize: 13,
    color: '#dddddddd',
    marginTop: 2,
  },
});
